<template>
  <div class="resume-edit">
    <section class="layout-content inner">
      <div class="sub-nav">
        <div class="top-action">
          <el-button type="primary" @click="refreshResumeAction" :disabled="id == -1 || !id">刷新简历</el-button>
          <!-- <div class="resume-title" v-if="id != -1 && id">
            <div>简历名称：</div>
            <div class="ct" v-if="basicForm">
              <span v-if="!edit && basicForm.title">{{ basicForm.title }}</span>
              <el-input v-model="basicForm.title" v-else></el-input>
            </div>
            <span class="change-style" @click="saveTitle">{{edit ? '保存' : '修改'}}</span>
          </div> -->
          <div class="check-style" v-if="basicForm">
            <el-checkbox v-model="basicForm.refresh" :disabled="id == -1 || !id" @change="isstartOrStop(basicForm.id)"
              class="rightcontenttime">自动刷新
              <span><span class="rightcontenttime">至{{basicForm.ceaseRefreshTime | timedate}}</span><span
                  class="rightcontenttime"><a href="javascript:;" :class="id == -1 || !id?'disablecole':''"
                    @click="startOrStop(basicForm.id)">重置时间</a>
                </span></span>
            </el-checkbox>

          </div>
          <!-- <div class="check-style">
            <el-checkbox v-if="basicForm" v-model="basicForm.express" @change="expressAction"
              :disabled="id == -1 || !id">默认投递该简历</el-checkbox>
          </div> -->
          <!-- <div class="check-style">
            <el-checkbox v-model="publicity" @change="publicAction" :disabled="id == -1 || !id">该简历对所有人公开</el-checkbox>
          </div> -->
          <div class="line"></div>
          <ul class="nav-left">
            <li :class="[{ 'active': activeStep == index }]" v-for="(item,index) in leftSideBar" @click="jump(index)">
              <span class="nav-name">{{item}}</span>
              <i class="el-icon-arrow-right"></i>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <!-- <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
          <el-tab-pane :label="v.title" :name="i+''" v-for="(v,i) in resumeList" :key="i"></el-tab-pane>
        </el-tabs> -->
        <div class="wrapper" v-loading="!show">
          <div class="resume-container" @scroll="handleScroll" ref="content" v-if="show">
            <div class="top-pic" v-if="basicForm">
              <el-avatar class="avatar" fit="cover" :size="102" v-if="basicForm.sex && basicForm.sex ===1"
                :src="(basicForm.photo || require('../../../assets/img/avatar.png'))"></el-avatar>
              <el-avatar class="avatar" fit="cover" :size="102" v-else-if="basicForm.sex && basicForm.sex ===2"
                :src="(basicForm.photo || require('../../../assets/img/female.png'))"></el-avatar>
              <div class="pic-items">
                <div class="user">{{basicForm.name}}</div>
                <el-upload v-if="id != -1 && id" action :http-request="postFile" :show-file-list="false">
                  <el-button type="text">上传照片</el-button>
                  <div slot="tip" class="el-upload__tip">仅支持jpg、png、bmp类型，500kb以内，建议尺寸100*100</div>
                </el-upload>
              </div>
            </div>
            <div class="sub-line"></div>
            <div class="step-jump"></div>
            <basic-info :basicForm="basicForm" :id="id" @updateResume="updateResumeAction" :selectItems="selectItems">
            </basic-info>
            <div class="step-jump"></div>
            <contact-info :selectItems="selectItems" @updateResume="updateResumeAction" :basicForm="basicForm" :id="id">
            </contact-info>
            <div class="step-jump"></div>
            <inte-info @updateResume="updateResumeAction" :id="id" :selectItems="selectItems" :basicForm="basicForm">
            </inte-info>
            <div class="step-jump"></div>
            <work-info @updateResume="updateResumeAction" :id="id" :selectItems="selectItems"
              v-if="workForms.length > 0" :workForms="workForms" @deleteItem="deleteItem" :index="i" :key="`${i}1`"
              v-for="(v,i) in workForms" @addItem="addItem"></work-info>
            <div class="add-btn" v-if="workForms.length == 0">
              <span>工作经历</span>
              <el-button plain @click="addItem(0,1)">+添加工作经历</el-button>
            </div>
            <div class="step-jump"></div>
            <edu-info :id="id" @updateResume="updateResumeAction" :selectItems="selectItems" v-if="eduForms.length > 0"
              :eduForms="eduForms" @deleteItem="deleteItem" :index="i" :key="`${i}2`" v-for="(v,i) in eduForms"
              @addItem="addItem"></edu-info>
            <div class="add-btn" v-if="eduForms.length == 0">
              <span>教育经历</span>
              <el-button plain @click="addItem(0,2)">+添加教育经历</el-button>
            </div>
            <div class="step-jump"></div>
            <lang-info :id="id" @updateResume="updateResumeAction" :selectItems="selectItems"
              v-if="langForms.length > 0" :langForms="langForms" @deleteItem="deleteItem" :index="i" :key="`${i}3`"
              v-for="(v,i) in langForms" @addItem="addItem"></lang-info>
            <div class="add-btn" v-if="langForms.length == 0">
              <span>语言能力</span>
              <el-button plain @click="addItem(0,3)">+添加语言能力</el-button>
            </div>
            <div class="step-jump"></div>
            <learn-info @updateResume="updateResumeAction" :id="id" v-if="learnForms.length > 0"
              :learnForms="learnForms" @deleteItem="deleteItem" :index="i" :key="`${i}4`" v-for="(v,i) in learnForms"
              @addItem="addItem"></learn-info>
            <div class="add-btn" v-if="learnForms.length == 0">
              <span>学习经历</span>
              <el-button plain @click="addItem(0,4)">+添加学习经历</el-button>
            </div>
            <div class="step-jump"></div>
            <intro-info @getInfo="getInfoAction" :basicForm="basicForm" :awardsForms="awardsForms"
              :abilitysForms="skillsForms" :id="id"></intro-info>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import BasicInfo from './basicInfo.vue';
import ContactInfo from './contactInfo.vue';
import InteInfo from './inteInfo.vue';
import WorkInfo from './workInfo.vue';
import EduInfo from './eduInfo.vue';
import LangInfo from './langInfo.vue';
import LearnInfo from './learnInfo.vue';
import IntroInfo from './introInfo/index.vue';
import { selectResumeList } from '../../../api/index';
import {
  getPhomeMail,
  uploadImg,
  getInfo,
  updatePersonal,
  updatePurpose,
  updateEducation,
  updateLanguage,
  updateLearn,
  updateWork,
  editResume,
  refreshResume,
  deleteWork,
  deleteEducation,
  deleteLanguage,
  deleteLearn,
  startOrStop
} from '../../../api/resumeEdit';
import { getDict, getJobList, getTradeList, getMajorList, getDomicileList } from '../../../api/dict'
import { updatePublicity, updateExpress } from '../../../api/resumeList';

export default {
  data () {
    return {
      ids: [],
      basicForm: null,
      id: null,
      show: false,
      roundchecked: false,
      fileUrl: '',
      selectItems: [],
      resumeList: [],
      learnForms: [{ toDay: false }],
      eduForms: [{}],
      workForms: [{}],
      langForms: [{}],
      skillsForms: [{}],
      awardsForms: [{}],
      activeStep: 0,
      scrollTop: 0,
      leftSideBar: ['基本信息', '联系信息', '求职意向', '工作经历', '教育经历', '语言能力', '学习经历', '自我介绍'],
      publicity: false,
      edit: false,
      title: '默认简历',
      activeName: '0',
      currents: 1
    };
  },
  components: {
    BasicInfo,
    ContactInfo,
    InteInfo,
    WorkInfo,
    EduInfo,
    LangInfo,
    LearnInfo,
    IntroInfo
  },
  created () {
    this.id = this.$route.query.id || null;
    this.getResumeList();
    this.getLevelAction();
  },
  filters: {
    timedate (val) {
      if (val) {
        let time = /\d{4}-\d{1,2}-\d{1,2}/g
          .exec(val)
          .toString()
        return time
      }
    },


  },
  methods: {
    // 公开程度
    publicAction (val) {
      let query = {
        publicity: val ? 1 : 2,
        id: this.id
      };
      updatePublicity(query).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '操作成功'
          });
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    //  快速投递
    expressAction (val) {
      let query = {
        id: this.id,
        express: val
      };
      updateExpress(query).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '操作成功'
          });
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 修改简历名称
    saveTitle () {
      if (this.edit) {
        if (!this.basicForm.title) {
          return;
        }
        let form = {
          id: this.id,
          title: this.basicForm.title
        };
        (form.id ? editResume(form) : updatePersonal(form)).then(res => {
          if (res.success) {
            this.$notify({
              type: 'success',
              message: '保存成功'
            });

            this.edit = !this.edit;
            this.getResumeList();
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      } else {
        this.edit = !this.edit;
      }
    },
    // 刷新简历
    refreshResumeAction () {
      if (this.id != -1) {
        refreshResume(this.id).then(res => {
          if (res.success) {
            this.$notify({
              type: 'success',
              message: '刷新成功'
            });
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      }
    },
    // 获取列表
    getResumeList (name) {
      selectResumeList().then(res => {
        if (res.success) {
          this.resumeList = res.data || [];
          if (this.resumeList.length < 3) {
            let defaultResume = {
              title: '添加简历',
              id: -1
            };
            this.resumeList.push(defaultResume);
          }
          this.ids = this.resumeList.map(v => {
            return v.id;
          });
          // 编辑简历
          if (this.id) {
            this.resumeList.forEach((v, i) => {
              if (v.id == this.id) {
                this.activeName = String(i);
              }
            });
            // 添加简历
          } else {
            if (name || !this.ids.includes(-1)) {
              this.activeName = '0';
              this.id = this.resumeList[0].id;
              this.getInfoAction(this.id);
            } else {
              this.activeName = String(this.resumeList.length - 1);
            }
          }
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    isstartOrStop (id) {
      if (this.basicForm.refresh) {
        this.$confirm('开启自动刷新后将，简历将每天刷新时间，保证简历被更多企业检索', '自动刷新', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.startOrStop(id)
        }).catch(action => {
          this.basicForm.refresh = false
        });
      } else {
        this.startOrStop(id)
      }

    },
    //自动刷新简历
    startOrStop (id) {
      let formData = new FormData();

      formData.append('id', JSON.stringify(id));
      formData.append('refresh', JSON.stringify(this.basicForm.refresh));
      startOrStop(formData).then(res => {
        if (res.success) {
          this.basicForm.ceaseRefreshTime = res.data
          return false;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 获取简历信息
    getInfoAction (id) {
      this.basicForm = null;
      if (id == -1 || !id) {
        this.basicForm = { title: '' };
        this.edit = true;
        this.publicity = false;
        this.workForms = [{}];
        this.eduForms = [{}];
        this.langForms = [{}];
        this.learnForms = [{ toDay: false }];
        this.skillsForms = [{}];
        this.awardsForms = [{}];
        this.show = true;
        // this.show = false;
        setTimeout(i => {
          this.show = true;
        }, 10);
        return;
      }

      getInfo(id).then(res => {
        if (res.success) {
          if (res.data.resume) {
            this.basicForm = res.data.resume || null;
            this.basicForm.title ? (this.edit = false) : (this.edit = true);
            this.basicForm.publicity == 1 ? (this.publicity = true) : (this.publicity = false);
            this.workForms = res.data.works || [{}];
            this.eduForms = res.data.educations || [{}];
            this.langForms = res.data.languages || [{}];
            this.learnForms = res.data.trains || [{ toDay: false }];
            this.skillsForms = res.data.skills || [{}];
            this.awardsForms = res.data.awards || [{}];
            // this.show = false;
            this.show = true;
            setTimeout(i => {
              this.show = true;
            }, 10);
          }
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 上传头像
    postFile (params) {
      console.log(params.file, '上传图片');
      let msg = params.file.name.substring(params.file.name.lastIndexOf('.') + 1);
      const extension = msg === 'jpg';
      const extension2 = msg === 'png';
      const extension3 = msg === 'bmp';
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: '文件只能是 jpg、png、bmp类型!',
          type: 'warning'
        });
        return false;
      }
      if (params.file.size > 500 * 1024) {
        this.$confirm('图片不能超过500kb，请重新上传图片', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        });
        return false;
      } else {
        let formData = new FormData();
        formData.append('file', params.file);
        uploadImg(formData).then(res => {
          console.log(res, '头像');
          if (res.success) {
            this.fileUrl = res.data.fileUrl;
            let form = {
              id: this.id,
              photo: this.fileUrl
            };
            (form.id ? editResume(form) : updatePersonal(form)).then(data => {
              if (data.success) {
                console.log(data, '上传成功');
                this.$set(this.basicForm, 'photo', res.data.fileUrl);
                console.log(this.basicForm, 'fff');
                this.$notify({
                  type: 'success',
                  message: '保存成功'
                });
              } else {
                this.$message.error(`${data.msg}`);
              }
            });
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      }
    },
    handleClick (tab, event) {
      let id = this.resumeList[tab.name].id;
      this.id = id;
      this.getInfoAction(id);
      //                id == -1 ?  this.edit = true :  this.edit = false;
    },
    // 获取下拉
    getLevelAction () {
      let dict = 'current_status,education,language,marital_status,nation,political_status,title_level,vision,work_exp,work_mode,area,language_proficiency'
      //   getDict(dict).then(data => {
      //     console.log(data);
      //     if (data.success) {
      //       let obj = data.data
      //       this.selectItems = {
      //         currentStatusList: obj.current_status,
      //         educationList: obj.education,
      //         languageList: obj.language,
      //         languageProficiencyList: lobj.anguage_proficiency,
      //         maritalStatusList: obj.marital_status,
      //         nationList: obj.nation,
      //         politicalStatusList: obj.political_status,
      //         titleLevelList: obj.title_level,
      //         visionList: obj.vision,
      //         workExpList: obj.work_exp,
      //         workModeList: obj.work_mode,
      //         workPlaceList: obj.area
      //       }
      //       this.getInfoAction(this.id);
      //     } else {
      //       this.$message.error(`${res.msg}`);
      //     }
      //   })
      Promise.all([getDict(dict), getJobList(), getTradeList(), getMajorList(), getPhomeMail()]).then(data => {
        console.log(data);
        if (data[0].data) {
          let obj = data[0].data;
          console.log(obj);

          this.selectItems = {
            currentStatusList: obj.current_status,
            educationList: obj.education,
            languageList: obj.language,
            languageProficiencyList: obj.language_proficiency,
            maritalStatusList: obj.marital_status,
            nationList: obj.nation,
            politicalStatusList: obj.political_status,
            titleLevelList: obj.title_level,
            visionList: obj.vision,
            workExpList: obj.work_exp,
            workModeList: obj.work_mode,
            workPlaceList: obj.area,
            jobCategoryList: data[1].data,
            tradeCategoryList: data[2].data,
            majorCategoryList: data[3].data,
            phone: data[4].data.phone,
            mail: data[4].data.mail,
            // domicilePlaceList: data[5].data


          }
          // getDomicileList()
          this.getInfoAction(this.id);
        }
        console.log(this.selectItems);

      })
      //   getLevel().then(res => {
      //     if (res.success) {
      //       this.selectItems = res.data;
      //     } else {
      //       this.$message.error(`${res.msg}`);
      //     }
      //   });
    },
    // 更新简历信息
    updateResumeAction (form, type, index) {
      switch (type) {
        case 1: // 个人信息,联系信息
          (form.id ? editResume(form) : updatePersonal(form)).then(res => {
            if (res.success && (res.data == 2 || res.data == 3 || res.data == 4)) {
              this.$router.push({ path: '/register-info', query: { mark: parseInt(res.data) } })
              this.$message.error(`您的简历还未完善，请先完善简历。`);
            }
            else if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
              if (!form.id || form.id == -1) {
                this.id = null;
                this.getResumeList('0');
              }
            } else {
              this.$message.error(`${res.msg}`);
              this.getInfoAction(this.id);
            }
          });
          break;
        case 2: // 教育经历
          console.log(index, form);
          updateEducation(form).then(res => {
            if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
              if (form.id) {

              } else {
                this.eduForms.splice(index, 1, { ...form, id: res.data })
              }
              console.log(res);
            } else {
              this.$message.error(`${res.msg}`);
              this.getInfoAction(this.id);
            }
          });
          break;
        case 3: // 语言能力
          updateLanguage(form).then(res => {
            if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
              if (form.id) {

              } else {
                this.langForms.splice(index, 1, { ...form, id: res.data })
              }
            } else {
              this.getInfoAction(this.id);
              this.$message.error(`${res.msg}`);
            }
          });
          break;
        case 4: // 学习经历
          updateLearn(form).then(res => {
            if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
              if (form.id) {

              } else {
                this.learnForms.splice(index, 1, { ...form, id: res.data })
              }
            } else {
              this.getInfoAction(this.id);
              this.$message.error(`${res.msg}`);
            }
          });
          break;
        case 5: // 工作经历
          updateWork(form).then(res => {
            if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
              if (form.id) {

              } else {
                this.workForms.splice(index, 1, { ...form, id: res.data })
              }
            } else {
              this.getInfoAction(this.id);
              this.$message.error(`${res.msg}`);
            }
          });
          break;
        case 6: // 求职意向
          updatePurpose(form).then(res => {
            if (res.success) {
              this.$notify({
                type: 'success',
                message: '保存成功'
              });
            } else {
              this.getInfoAction(this.id);
              this.$message.error(`${res.msg}`);
            }
          });
          break;
      }
    },
    handleScroll (el) {
      this.scrollTop = this.$refs.content.scrollTop;
    },
    onScroll () {
      let temp = document.querySelectorAll('.step-jump');
      temp.forEach((item, index) => {
        if (this.scrollTop >= item.offsetTop) {
          this.activeStep = index;
        }
      });
    },
    // 添加
    addItem (index, type) {
      switch (type) {
        case 1: // 工作经历
          let obj1 = {};
          this.workForms.splice(index + 1, 0, obj1);
          break;
        case 2: // 教育经历
          let obj2 = {};
          this.eduForms.splice(index + 1, 0, obj2);
          break;
        case 3: // 语言能力
          let obj3 = {};
          this.langForms.splice(index + 1, 0, obj3);
          break;
        case 4: // 培训经历
          let obj4 = {
            toDay: false
          };
          this.learnForms.splice(index + 1, 0, obj4);
          break;
      }
    },

    // 删除
    deleteItem (index, type, form) {
      console.log(index, type, form);

      switch (type) {
        case 1: // 工作经历
          if (form.id) {
            this.$confirm('确定删除选中的工作经历吗？', '工作经历', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteWork(form.id).then(res => {
                if (res.success) {
                  this.$notify({
                    type: 'success',
                    message: '删除成功'
                  });
                  this.workForms.splice(index, 1);
                } else {
                  this.$message.error(`${res.msg}`);
                }
              });
            });
          } else {
            this.workForms.splice(index, 1);
          }
          break;
        case 2: // 教育经历
          if (form.id) {
            this.$confirm('确定删除选中的教育经历吗？', '删除教育经历', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteEducation(form.id).then(res => {
                if (res.success) {
                  this.$notify({
                    type: 'success',
                    message: '删除成功'
                  });
                  this.eduForms.splice(index, 1);
                } else {
                  this.$message.error(`${res.msg}`);
                }
              });
            });
          } else {
            this.eduForms.splice(index, 1);
          }
          break;
        case 3: // 语言能力
          if (form.id) {
            console.log(2);

            this.$confirm('确定删除选中的语言能力吗？', '删除语言能力', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteLanguage(form.id).then(res => {
                if (res.success) {
                  this.$notify({
                    type: 'success',
                    message: '删除成功'
                  });
                  this.langForms.splice(index, 1);
                } else {
                  this.$message.error(`${res.msg}`);
                }
              });
            });
          } else {
            this.langForms.splice(index, 1);
          }
          break;
        case 4: // 培训经历
          if (form.id) {
            this.$confirm('确定删除选中的培训经历吗？', '删除培训经历', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteLearn(form.id).then(res => {
                if (res.success) {
                  this.$notify({
                    type: 'success',
                    message: '删除成功'
                  });
                  this.learnForms.splice(index, 1);
                } else {
                  this.$message.error(`${res.msg}`);
                }
              });
            });
          } else {
            this.learnForms.splice(index, 1);
          }
          break;
      }
    },
    jump (index) {
      let that = this;
      this.activeStep = index;
      let jump = document.querySelectorAll('.step-jump');
      let resumeContainer = document.querySelector('.resume-container');
      let total = jump[index].offsetTop;
      let distance = resumeContainer.scrollTop;
      let step = (total / 50) >> 0;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total;
        step = (newTotal / 50) >> 0;
        smoothUp();
      }
      function smoothDown () {
        if (distance < total) {
          distance += step;
          resumeContainer.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          resumeContainer.scrollTop = total;
        }
      }

      function smoothUp () {
        if (distance > total) {
          distance -= step;
          resumeContainer.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          resumeContainer.scrollTop = total;
        }
      }
    }
  },
  watch: {
    scrollTop (val) {
      this.onScroll();
    }
  }
};
</script>

<style lang="css" scoped>
.inner {
    width: 1200px;
    min-height: 581px;
    margin: 16px auto;
    display: flex;
}
.sub-nav {
    width: 312px;
    /* height: 561px; */
    background: #ffffff;
    margin-right: 16px;
    box-sizing: border-box;
}
.wrapper {
    width: 872px;
    height: 800px;
    background: #ffffff;
}
.resume-container {
    width: 872px;
    height: 800px;
    overflow: auto;
    position: relative;
}
.top-action .el-button {
    width: 148px;
    height: 46px;
    font-size: 16px;
    margin-bottom: 26px;
    margin-left: 66px;
    margin-top: 21px;
}
.resume-title {
    padding: 0px 44px;
    display: flex;
    align-items: center;
    height: 32px;
    color: #222222;
    margin-bottom: 10px;
}
.resume-title > div {
    font-size: 14px;
    display: inline-block;
}
.resume-title > div:first-child {
    width: 70px;
}
.change-style {
    font-size: 14px;
    color: #0093ff;
    width: 31px;
    padding-left: 10px;
    cursor: pointer;
}
.ct {
    flex: 1;
}
.check-style {
    margin-bottom: 14px;
    /* padding: 0 44px; */
    padding-left: 44px;
}
.el-checkbox {
    color: #222222;
}
.line {
    width: 100%;
    height: 1px;
    background: #e8e8e8;
    margin: 26px 0;
    margin-bottom: 16px;
}
.active {
    background: #f2f7f9;
}
.active i {
    color: #1893fc;
}
.nav-left {
    width: 312px;
}
.nav-left li {
    width: 280px;
    color: #222222;
    font-size: 14px;
    line-height: 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    margin: 0px 16px;
    list-style: none;
    cursor: pointer;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sub-line {
    width: 784px;
    height: 1px;
    background: #e8e8e8;
    margin-left: 45px;
}
.top-pic {
    background: #ffffff;
    padding: 0px 44px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    height: 151px;
    display: flex;
    align-items: center;
}
.pic-items {
    margin-left: 32px;
}
.pic-items .user {
    font-size: 20px;
    color: #333333;
    font-weight: 600;
}
.pic-items .el-button {
    font-size: 14px;
    margin-top: 2px;
}
.add-btn {
    width: 100%;
    background: #ffffff;
    padding: 0 45px;
    box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.add-btn span:first-child:after {
    width: 28px;
    height: 2px;
    background: #1893fc;
    content: '';
    display: block;
    margin-top: 3px;
    margin-bottom: 20px;
}
.add-btn .el-button {
    width: 100%;
    background: #ffffff;
    font-size: 14px;
    height: 40px;
}
.avatar {
    background-size: contain;
}
.avatar /deep/ img {
    width: 100%;
    height: 100%;
}
.rightcontenttime {
    margin-right: 10px;
    font-size: 14px;
}
.disablecole {
    color: #c0c4cc;
    cursor: not-allowed;
}
</style>